<!--
* @description 
* @fileName index.vue
* @author yanghong
* @date 2021/01/11 15:25:55
!-->
<template>
  <div class="alarmCountRank-container">
      <el-button icon="el-icon-back" @click='()=>{this.$router.go(-1)}' >{{$t('back')}}</el-button>
      <div class="flex-container">
        <div class="flex-item box-sale-bar">
            <div class="title clearfix">
                {{$t('card.management')}}
                <el-dropdown class="pull-right" @command="initChart">
                    <el-button type="primary">
                        {{year+' '+$t('year')}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in yearList" :key="item" :command="item">{{item+' '+$t('year')}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div id="lineChart" :style="{width: '100%', height: '400px'}"></div>
        </div>
        </div>
  </div>
</template>

<script>
import '@/utils/index.js'
let echarts = require('echarts/lib/echarts');
export default {
  data () {
    return {
      year:new Date().getFullYear(),
      yearList:[],
      currentTime:this.$options.filters['dateFormat'](new Date()),
      lineChart:{}
    }
  },

  computed: {

  },
  mounted(){
      this.lineChart= echarts.init(document.getElementById('lineChart'));
      this.initYear()
      this.initChart(this.year)
  },
  methods: {
    initYear(){
        let year=new Date().getFullYear()
        for(var i=year;i>2016;i--){
            this.yearList.push(i)
        }
    },
    async initChart(val){
        this.year=val
        let res = await this.API.gprsGetHistoryData({
            wifiSN : this.$route.query.wifiSN,
			msisdn : this.$route.query.msisdn,
			year : this.year
        })
        console.log(res)
        let xAxisData=[],seriesData=[]
        res.forEach(item => {
            xAxisData.push(item.key)
            seriesData.push(item.value)
        });
        let optionObj={
                tooltip:{
                    formatter:(params)=>{
                        console.log(params)
                        return params[0].axisValue+this.$t('overview.month')+'<br/>'+this.$t('card.Useflow')+' : '+params[0].data
                    }
                },
                xAxis:{
                    name:this.$t('overview.month'),
                    data : xAxisData
                },
                yAxis:{
                    name:this.$t('card.Useflow')
                },
                grid :{
                    left : '20px',
                    top : '45px',
                    right : '45px',
                    bottom : '20px',
                    containLabel :true
                },
                series : [this.EchartsUtil.getSeries({type:'line',data:seriesData})]
            };
        this.lineChart.setOption(this.EchartsUtil.getOption(optionObj));
    }
  }
}

</script>
<style lang='less'>
@color_box_bg:#EFEFEF;
@color_title:#444;
@border_radius:3px;
@border_bottom:1px dashed #D1D1D1;
.alarmCountRank-container{
    .flex-item{
      margin: 10px 0;
      flex:1 1 25%;
      background:@color_box_bg;
      border-radius: @border_radius;
      box-shadow: 4px 4px 5px rgba(0,0,0,.1);
      .title{
        padding: 10px;
        border-bottom: @border_bottom;
        color: @color_title;
      }
    }
}
</style>